<template>
  <nav class="site-navbar">
    <div class="site-navbar__header" style="color:#fff">
      <img class="logo" src="../assets/img/logo.png" alt="logo" />
      国家开放大学师资库系统
    </div>
    <div class="clearfix">
      <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
        <!-- <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
          <template slot="title">
            <el-badge value="new">
              <icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
            </el-badge>
          </template>
        </el-menu-item> -->

        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link" style="font-size:14px">
              <!-- <img src="~@/assets/img/avatar.png" :alt="userName" /> -->

              <icon-svg name="geren" class="el-icon-setting"></icon-svg>
              {{ userName }}
              <i class="el-icon-arrow-down el-icon--right" style="font-size:14px"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </nav>
</template>

<script>
import UpdatePassword from "./main-navbar-update-password";
import { clearLoginInfo } from "@/utils";
export default {
  data() {
    return {
      updatePassowrdVisible: false
    };
  },
  components: {
    UpdatePassword
  },
  computed: {
    userName: {
      get() {
        return this.$store.state.user.name;
      }
    },
    navbarLayoutType: {
      get() {
        return this.$store.state.common.navbarLayoutType;
      }
    }
  },
  methods: {
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          clearLoginInfo();
          this.$router.push({ name: "login" });

          // this.$http({
          //   url: this.$http.adornUrl("/sys/logout"),
          //   method: "post",
          //   data: this.$http.adornData()
          // }).then(({ data }) => {
          //   if (data && data.code === 0) {
          //     clearLoginInfo();
          //     this.$router.push({ name: "login" });
          //   }
          // });
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped>
.logo{
  width: 40px;
  margin-left: 10px;
}
.site-navbar__header {
  position: relative;
  float: left;
  min-width: 400px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  color: #fff;
  font-size: 24px;
}
</style>
